<template>
   <div v-if="caseDetailInfo" class="contianer">
     <div class="main">
       <crumb/>
       <!-- 头部 -->
       <div class="top-box">
         <span class="t1">{{caseDetailInfo.caseName}}</span>
         <span class="t2" @click="showBg">背景介绍</span>
       </div>
       <!--  中间内容区  -->
       <div class="middle-box">
         <img class="left-box" src="~@/assets/images/zhal_bj@2x.png" />
         <div class="right-box">
           <div class="case-request-box" :title="caseDetailInfo.caseRequest">{{caseDetailInfo.caseRequest}}</div>
           <div class="option-box">
             <div class="finished-case-box" @click="caseFinishedDetail">
               <span>共有</span>
               <span class="num-person">{{caseDetailInfo.finishedUserNum}}</span>
               <span>人完成本案例</span>
               <i class="el-icon-d-arrow-right" style="font-size: 12px;margin-left: 2px;"></i>
             </div>
             <div class="status-box">
               <div class="cell">
                 <span>流程：</span><span>{{caseDetailInfo.linkNum}}</span>
               </div>
               <div class="cell">
                 <span>任务：</span><span>{{caseDetailInfo.taskNum}}</span>
               </div>
               <div class="cell">
                 <span>状态：</span>
                 <span v-if="caseDetailInfo.bottomInfo.finishedFlag === '0'">未开始</span>
                 <span v-else-if="caseDetailInfo.bottomInfo.finishedFlag === '1'">进行中</span>
                 <span v-else>已完成</span>
               </div>
             </div>
           </div>
           <div class="line"></div>
           <div class="case-status-box">
             <case-no-start-box
               :case-name="caseDetailInfo.caseName"
               :link-num="parseInt(caseDetailInfo.linkNum)"
               :resource-case-id="caseDetailInfo.resourceCaseId"
               v-if="caseDetailInfo.bottomInfo.finishedFlag == '0'"></case-no-start-box>
             <case-doing-box
               :case-name="caseDetailInfo.caseName"
               :date-time="caseDetailInfo.bottomInfo.createdTime"
               :link-num="parseInt(caseDetailInfo.linkNum)"
               :finished-link-num="parseInt(caseDetailInfo.linkFinishedNum)"
               :duration="parseInt(caseDetailInfo.bottomInfo.duration || '0')"
               :resource-case-id="caseDetailInfo.resourceCaseId"
               v-else-if="caseDetailInfo.bottomInfo.finishedFlag == '1'"></case-doing-box>
             <case-finished-box
               :case-name="caseDetailInfo.caseName"
               :date-time="caseDetailInfo.bottomInfo.createdTime"
               :duration="parseInt(caseDetailInfo.bottomInfo.duration)"
               :score="parseInt(caseDetailInfo.bottomInfo.score)"
               :rank="parseInt(caseDetailInfo.bottomInfo.rank)"
               :resource-case-id="caseDetailInfo.resourceCaseId"
               v-else></case-finished-box>
           </div>
         </div>
       </div>
       <div class="line"></div>
       <div class="xunlian-box" @click="caseHistory">
         <span>我的实训(共完成 {{caseDetailInfo.bottomInfo.batchNum}} 次)</span>
         <i class="el-icon-d-arrow-right" style="font-size: 12px;"></i>
       </div>
       <!-- 底部区域 -->
       <div class="bottom-box">
         <link-cell v-for="item of caseDetailInfo.linkList"
                    :key="item.id"
                    :status="parseInt(item.finishedFlag)"
                    :disabled="false"
                    :resource-case-id="caseDetailInfo.resourceCaseId"
                    :link-name="item.nodeName"
                    :task-num="item.taskNum"
                    :finished-task-num="item.finishedTaskNum"
                    :score="item.score"
                    style="margin-right: 20px;"></link-cell>
       </div>
     </div>
      <!-- 背景弹出框 -->
     <background
       :bg-list="caseDetailInfo.caseBgList"
       :dialog-visible="dialogVisible"></background>
   </div>
</template>

<script>
import caseDoingBox from './components/multipleMain/caseDoingBox'
import caseFinishedBox from './components/multipleMain/caseFinishedBox'
import caseNoStartBox from './components/multipleMain/caseNoStartBox'
import linkCell from './components/multipleMain/linkCell'
import background from './components/background'
import { caseDetail } from '@/api/student/training/multiple.js'
export default {
  name: 'multipleMain',
  data () {
    return {
      resourceCaseId: null,
      dialogVisible: false, // 背景是否弹出
      caseDetailInfo: null
    }
  },
  methods: {
    showBg () {
      if (this.dialogVisible) this.dialogVisible = false
      setTimeout(() => { this.dialogVisible = true })
    },
    /**
     * 获取案例详情
     */
    async getCaseDetail () {
      let res = await caseDetail({
        resourceCaseId: this.resourceCaseId
      })
      if (!res) return
      this.caseDetailInfo = res
    },
    caseFinishedDetail () {
      this.$router.push({ name: 'caseFinished', query: { resourceCaseId: this.resourceCaseId } })
    },
    caseHistory () {
      this.$router.push({ name: 'caseHistory', query: { resourceCaseId: this.resourceCaseId } })
    }
  },
  created () {
    this.resourceCaseId = this.$route.query.resourceCaseId
    this.getCaseDetail()
  },
  components: {
    caseDoingBox, caseFinishedBox, caseNoStartBox, linkCell, background
  }
}
</script>

<style scoped lang="scss">
.contianer{
  width: 100%;
  height: 120vh;
  margin-top: 0px;
  background-color: white;
  display: flex;
  justify-content: center;
  .main{
    width: 1200px;
    height: 100%;
    .top-box{
      display: flex;
      width: 100%;
      justify-content: space-between;
      height: auto;
      font-family:PingFang SC;
      font-weight:500;
      .t1{
        font-size:24px;
        color:rgba(16,29,55,1);
      }
      .t2{
        font-size:14px;
        color:rgba(0,156,246,1);
        cursor: pointer;
      }
    }
    .middle-box{
      margin-top: 22px;
      display: flex;
      flex-flow: row nowrap;
      width: 100%;
      .left-box{
        width: 385px;
        height: 500px;
      }
      .right-box{
        width:  calc(100% - 385px);
        height: 100%;
        box-sizing: border-box;
        padding-left: 25px;
        .case-request-box{
          width: 100%;
          height: 80px;
          font-size:14px;
          line-height: 19px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
          cursor: pointer;
        }
        .option-box{
          width: 100%;
          height: 80px;
          .finished-case-box{
            width: 100%;
            cursor: pointer;
            margin-top: 21px;
            font-size: 14px;
            color: rgba(16,29,55,1);
            .num-person{
              margin-left: 5px;
              margin-right: 5px;
              color: #FF8643
            }
          }
          .status-box{
            margin-top: 22px;
            width: 100%;
            display: flex;
            font-size:16px;
            color:rgba(16,29,55,1);
            .cell{
              margin-right: 60px;
            }
          }
        }
        .line{
          width: 100%;
          background-color: #E5E5E5;
          height: 1px;
        }
        .case-status-box{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .line{
      width: 100%;
      height: 1px;
      background-color: #E5E5E5;
    }
    .bottom-box{
      width: 100%;
      display: flex;
      height: 248px;
    }
    .xunlian-box{
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size:14px;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(0,156,246,1);
      margin-top: 20px;
      margin-bottom: 33px;
    }
  }
}

</style>
